<template>
	<view class="search-wrap px24py30">
		<view>
			<bg-title>
				<text class="font-14 font-normal">
					<slot>选择要查询的项目</slot>
				</text>
			</bg-title>
			<view>
				<view class="flex my-4">
					<view>{{label}}</view>
				</view>
				<view @click="show=true" class="mb-4">
					<u-input @click.native="show=true" v-model="year" readonly placeholder="请选择日期">
						<view slot="suffix">
							<u-icon name="arrow-down-fill" size="12"></u-icon>
						</view>
					</u-input>
				</view>
				<u-datetime-picker
				 :closeOnClickOverlay="true"
				 :formatter="formatter"
				 @close="close"
				 @confirm="confirm"
				 @cancel="close"
					:show="show"
					v-model="date"
					mode="year-month"
				></u-datetime-picker>
				
			</view>
			<view>
				<bg-btn @click="search">查询</bg-btn>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"bg-search3",
		props:{
			title:{
				default:'选择要查询的项目'
			},
			label:{
				default:"字段名称"
			}
		},
		mounted() {
				this.date =  Number(new Date())
				this.year = this.$u.timeFormat(this.date, 'yyyymm')
		},
		data() {
			return {
				show:false,
				keyword:'',
				date:'',
				year:'',
				
			};
		},
		methods:{
			search(){
				this.$emit("search", this.year)
				// if(this.year){
					
				// } else {
				// 	this.$modal.msg("请选择月份")
				// }
			},
			clear(){
				this.$emit("search", '')
			},
			close(){
				this.show = false
			},
			confirm(e){
				console.log(e)
				this.year = this.$u.timeFormat(e.value, 'yyyymm')
				this.close()
			},
			formatter(type,value){
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				return value
			}
			
		}
		
	}
</script>

<style scoped>
.search-wrap {
	background: #ffffff;
	box-sizing: border-box;
	border-radius: 16rpx;
	font-size: 28rpx;
}
</style>